<template>
	<view class="full-screen-box">
		<swiper class="swiper" vertical :current="currentIndex" @change="handleSwiperChange">
			<swiper-item v-for="(item, index) in products" :key="index">
				<view class="swiper-item">
					<image :src="item.image" class="full-img" mode="aspectFill" @tap="handleImageClick"></image>
					<!-- 右侧图标 -->
					<view class="icon-container" @tap.stop>
						<view class="right-icon">
							<image src="/static/icon/like1.png" class="icon-style"></image>
							<view class="icon-text">{{item.likes}}</view>
						</view>
						<view class="right-icon">
							<image src="/static/icon/star.png" class="icon-style"></image>
							<view class="icon-text">500</view>
						</view>
						<view class="right-icon">
							<image src="/static/icon/share.png" class="icon-style"></image>
							<view class="icon-text">236</view>
						</view>
						<view class="right-icon">
							<image src="/static/icon/message.png" class="icon-style" @click="shiftBlurbComment(item)"></image>
							<view class="icon-text">55</view>
						</view>
					</view>
					<!-- 下方内容 -->
					<view class="bottom-container" @tap.stop="handleBottomClick(item)">
						<view class="bottom-text">{{item.desc}}</view>
						<view class="bottom-name">{{item.storeName}}</view>
						<view>
							<image src="/static/icon/add.png" class="icon-style2"></image>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { Product } from '../../types/types'

	// 定义一个响应式变量来存储商品ID
	const productId = ref('');
	// 当前展示的商品索引
	const currentIndex = ref(0);

	// 使用 onLoad 钩子接收参数
	onLoad((options) => {
		if (options && options.id) {
			productId.value = options.id;
			// 根据 id 找到对应的索引
			const index = products.value.findIndex(item => item.id === Number(options.id));
			if (index !== -1) {
				currentIndex.value = index;
			}
		}
	});

	const products = ref<Product[]>([
		{
			id: 1,
			image: '/static/img/like1.jpg',
			storeName: 'Baby Three',
			likes: 1232,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
		{
			id: 2,
			image: '/static/img/like2.jpg',
			storeName: 'Baby Three',
			likes: 4334,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
		{
			id: 3,
			image: '/static/img/like1.jpg',
			storeName: 'Baby Three',
			likes: 888,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
		{
			id: 4,
			image: '/static/img/like1.jpg',
			storeName: 'Baby Three',
			likes: 123,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
	]);

	// 处理滑动切换
	const handleSwiperChange = (e : any) => {
		currentIndex.value = e.detail.current;
	};

	// 处理图片点击 - 返回home页
	const handleImageClick = () => {
		uni.reLaunch({
			url: '/pages/home/home'
		});
	}

	// 处理底部区域点击 - 跳转到 blurb 页面
	const handleBottomClick = (item:Product) => {
		uni.navigateTo({
			url: `/pages/blurb/blurb?id=${item.id}` // 携带商品 id 跳转
		});
	}
	// 跳转到简介页 且显示评论的tabs内容
	const shiftBlurbComment =(item:Product)=>{
		uni.navigateTo({
			url:`/pages/blurb/blurb?id=${item.id}&is_comment=true`
		})
	}
</script>

<style lang="scss" scoped>
	.full-screen-box {
		height: 100vh;
		background-color: #000;
	}

	.swiper {
		width: 100%;
		height: 100vh;
	}

	.swiper-item {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.full-img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.icon-container {
		position: absolute;
		top: 24rem;
		right: 0.6rem;
		z-index: 20;
	}

	.right-icon {
		margin-bottom: 1rem;
	}

	.icon-style {
		width: 2.25rem;
		height: 2.25rem;
	}

	.icon-text {
		margin-top: 0.2rem;
		color: rgba(255, 255, 255, 0.8);
		font-size: 0.63rem;
		text-align: center;
	}

	.bottom-container {
		position: absolute;
		bottom: 0.3rem;
		left: 0.7rem;
		z-index: 20;
		display: flex;
	}

	.bottom-text {
		width: 10.56rem;
		height: 2.19rem;
		line-height: 1.09rem;
		color: rgba(255, 255, 255, 1);
		font-size: 0.75rem;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.bottom-name {
		width: 6.5rem;
		height: 2.19rem;
		line-height: 2.19rem;
		border-radius: 0.25rem;
		color: rgba(255, 255, 255, 1);
		font-size: 1.06rem;
		text-align: right;
		font-weight: 600;
		margin-left: 2.6rem;
	}

	.icon-style2 {
		width: 1.56rem;
		height: 1.94rem;
		margin: 0.2rem 0 0 0.4rem;
	}
</style>